<template>
    <div class="content-right">
    	<card shadw>
    		<router-link :to="{name:'examination-increase'}"><Button type="primary" icon="plus-round">添加考场</Button></router-link>
	    		<Form ref="listType" :model="listType"  inline @keyup.enter.native="enterSearch">
		    		<Row class="search-state">
		    		 	<Col :xs="12" :sm="6" :md="4" :lg="4">
		    		 		<Input v-model="listType.keywords" placeholder="请输入考场排序/试卷关键字"></Input>
		    		 	</Col>
		    		 	<Col :xs="12" :sm="6" :md="6" :lg="6" id="time">
		    		 	 	<DatePicker id="time1" type="datetimerange" split-panels placeholder="请选择时间" @on-change='changeTime'></DatePicker>
		    			</Col>
		    			<Col :xs="12" :sm="6" :md="4" :lg="2" class="time">
		    		 		<Select v-model="listType.status" placeholder="请选择" clearable >
						        <Option id="time2" v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
						    </Select>
		    		 	</Col>
		    		 	<Col :xs="12" :sm="6" :md="4" :lg="4" class="time">
		    		 	 	<Button type="primary" @click="fromSearch('listType')">搜索</Button>
		    			</Col>
		    		</Row>
	    		</Form>
	    		<!--考场设置表单-->
    		 	<div class="table">
    		 		<Table border ref="selection" :columns="columns4" :data="data1" @on-selection-change='selectedNum'></Table>
    		 		<div class="search">
				        <Checkbox @on-change="handleSelect()" v-model='checkboxStatus' class="checkbox">全选</Checkbox>
				        <Button type="ghost" @click="allStatus(true)">启用</Button>
				        <Button type="ghost" @click="allStatus(false)">禁用</Button>
				        <Button type="ghost" @click="delData">删除</Button>
				        <Button type="ghost" @click="derive">导出数据</Button>
				        <Page :total="parseInt(data1Count)" show-elevator show-total :page-size="10" :current='page' @on-change="paging"></Page>
		   			</div>
    		 	</div>
    	</card>
    </div>
</template>
<script>
import Cookies from 'js-cookie';
import $store from "@/store/index.js";
import {router} from "@/router/index.js";
import util from "@/libs/util.js";
import Vue from "vue";
var $vue=new Vue();
export default {
    data() {
        return {
//      	多选状态
         cityList: [
            {
                value: '1',
                label: '启用'
            },
            {
                value: '0',
                label: '禁用'
            },   
        ],
    	model1: '',
//              列表的关键字和状态
         listType:{
                	keywords:'',
                	status:'',
                	examStartTime:'',
                	examendTime:''
                  },
//       表格的数据  
         listPage:1,  
         data2:'',
         data3:[],
//       分页
		 page:1,
		 data1Count:'',
//		 全选
		checkboxStatus:'',
		checkAll:false,
		selected:[],
		selectedAll:'',
		beginTime:'',
		finishTime:'',
//              表单数据
         columns4: [
            {
                type: 'selection',
                width: 60,
                align: 'center'
            },
            {
                title: '排序',
                align: 'center',
                key: 'Id'
            },
            {
                title: '考场名称',
                align: 'center',
                key: 'name'
            },
            {
                title: '绑定试卷名称',
                align: 'center',
                key: 'testPaperName',
               
            },
            {
                title: '考试起止时间',
                align: 'center',
                width: 160,
                key: 'examStartTime',
                render:function(h,params){
                	return h('div',[h('p',util.timestampToTime(params.row.examStartTime)),h('p',util.timestampToTime(params.row.examEndTime))])
                }
            },
            {
                title: '启用状态',
                align: 'center',
                key: 'status',
                render:function(h,params){
                	return h('i-switch',{
                		props:{
                			value:params.row.status==1?true:false,
                			size:"large",
                		},
                		on:{
                			'on-change':function(e){
                				if(params.row.status==1){
                    					params.row.status=0
                    				}else{
                    					params.row.status=1
                    				}
                				$vue.axios({
                					method:"get",
                					url:$store.state.app.globalUrl+"/admin/ExaminationRoom/changeStatus?id="+params.row.Id+'&status='+params.row.status,
                					data:{
                						
                					}
                				}).then(function(res){
                					if(res.data.msg=="操作成功"){
                						$vue.$Message.success(e?"已启用":"已禁用");
                					}else{
                						$vue.$Message.error("操作失败");
                					}
                				})
                			}
                		}
                	},[
                		h("span",{
                				slot:"open"
                			
                		},"开启"),
                		h("span",{
                				slot:"close"
                			
                		},"关闭")
                	]);
                }
            },
            {
                title: '应参考人数',
                align: 'center',
                key: 'examineeId'
            },
            {
                title: '合格人数',
                align: 'center',
                key: 'qualified'
            },
            {
                title: '合格率',
                align: 'center',
                key: 'yleld'
            },
            {
                title: '操作',
                align: 'center',
                key: 'address',
                width: 185,
                render:function(h,parent){
                	return h('div',{
                		style:{
								paddingTop:"10px",
								paddingBottom:"10px"
							}
                		},[
                	h("Tooltip",{
							props:{
								content:"编辑考场"
							}
						},
						[
						h('Button',{
							props:{
								type:"primary",
								icon:"ios-compose",
								size:"small"
							},
							style:{
								width:"60px",
								marginTop:"5px"
							},
							on:{
								click:function(){
									router.push({
										name:"compile-examination",
										qutay:{time:(new Date()).getTime()},
										query:{
    										id:parent.row.Id
    									}
									})
								}
								}
						},"编辑")
					]),
					h("Tooltip",{
						props:{
							content:"删除考场"
						}
					},
					[
						h('Button',{
							props:{
								type:"error",
								icon:"ios-trash-outline",
								size:"small"
							},
							style:{
								width:"60px",
								marginLeft:"5px",
								marginTop:"5px"
							},
							on:{
								'click':function(e){
									$vue.$Modal.confirm({
						                content: '<h4>确定删除？</h4>',
						                onOk: () => {
						                    $vue.axios({
						                        method:'get',
						                        url:$store.state.app.globalUrl+"/admin/ExaminationRoom/del?id="+parent.row.Id,
						                        data:{}
						                    }).then(function(res){
						                        $vue.$Message.success('已删除');
						                        router.push({
						                            name:'examination-room',
						                            query:{time:Date.parse(new Date())}
						                        })
						                    });
						                },
						                onCancel: () => {
						                    $vue.$Message.info('已取消');
						                }
						            })
								}
							}
						},"删除")
					]),
						h("Tooltip",{
							props:{
								content:"考生管理"
							}
						},
						[
							h('Button',{
								props:{
									type:"primary",
									icon:"person",
									size:"small"
								},
								style:{
									width:"60px",
									marginTop:"5px"
								},
								on:{
									click:function(){
										router.push({
											name:"examinee-management",
											query:{id:parent.row.Id}
										})
									}
								}
							},"管理")
						]),
						h("Tooltip",{
							props:{
								content:"成绩记录"
							}
						},
						[
							h('Button',{
								props:{
									type:"error",
									icon:"compose",
									size:"small"
								},
								style:{
									width:"60px",
									marginLeft:"5px",
									marginTop:"5px"
								},
								on:{
									click:function(){
										router.push({
											name:"test-particulars",
											query:{id:parent.row.Id}
										})
									}
								}
							},"成绩")
						])	
                	])
                }
            }
        ],    
        }
    },
   created:function(){
    	this.loadData();
    },
    watch:{
	   '$route':function(){
	   	this.loadData();
	   	this.handleSelect();
	   }
    },
    computed:{
    	data1:function(){
    		var arr1=[];
    		var arr=[];
    		this.data3.forEach(function(data){
    			var obj={Id:0,name:"",testPaperName:"",examStartTime:"",examEndTime:"",status:'',examineeId:0,qualified:0,yleld:0};
    			obj.Id=data.Id;
    			obj.name=data.name;
    			obj.testPaperName=data.testPaperName;
    			obj.examStartTime=data.examStartTime;
    			obj.examEndTime=data.examEndTime;
    			obj.status=data.status;
    			obj.examineeId=data.testPersonnel.length;
    			data.testPersonnel.forEach(function(data0){
	    			if(parseInt(data0.grade)>=parseInt(data.passScore)){
	    				arr1=arr1.concat(data0.grade);
	    			}
	    				obj.qualified=arr1.length;
	    		})
    			obj.yleld=(obj.examineeId==''?0:((obj.qualified/obj.examineeId).toFixed(4))*100)+"%";
	    		arr=arr.concat(obj);
    		})
    		return arr;
    	},
    },
    methods: {
//  	表单
		handleSelectAll (status) {
            this.$refs.selection.selectAll(status);
        },
//      全选
        handleSelect() {
			this.$refs.selection.selectAll(this.checkboxStatus);
        },
        enterSearch:function(){
       		this.fromSearch();
        },
//     搜索
        fromSearch(){
       		this.page=1;
       		this.loadData();
        },
//      获取列表数据
        loadData:function(){
        	var that=this;
        	var keywords1=that.listType.keywords==""?'':('&keywords='+that.listType.keywords);
        	var status1=that.listType.status==""?'':('&status='+that.listType.status);
        	var beginTime=that.beginTime==""?'':('&beginTime='+that.beginTime);
        	var finishTime=that.finishTime==""?'':('&finishTime='+that.finishTime);
        	this.axios({
	    		method:'get',
	    		url:that.$store.state.app.globalUrl+'/admin/ExaminationRoom/index?size='+10+'&page='+that.page+keywords1+status1+beginTime+finishTime,
	    	}).then(function(res){
				that.data3=res.data.data.list;
				that.data1Count=res.data.data.count;
				that.checkboxStatus=false;
	    	});
        },
//获取checkbox选中条数
	    selectedNum:function(page){
	    	 if(page.length==this.data1.length){
                this.checkboxStatus=true;
            }else{
                this.checkboxStatus=false;
            }
	    	var that=this;
            that.selectedAll=[];
            that.selected=[];
            that.selectedAll=page;
	    	page.forEach(function(page){
	    		that.selected.push(page.Id)	
			})
	    },
//	    禁用和启用
	    allStatus:function(flag){
	    	var that=this;
	    	that.axios({
				method:'get',
				url:that.$store.state.app.globalUrl+"/admin/ExaminationRoom/changeStatus?id="+that.selected.join(',')+'&status='+(flag?'1':'0'),
				data:{}
			}).then(function(res){
				if(res.data.msg=="操作成功"){
					that.$Message.success(flag?'已启用':'已禁用');
					that.$router.push({
						name:'examination-room',
						query:{time:Date.parse(new Date())}
					})
				}else{
					that.$Message.error(flag?'未选择考场':'未选择考场');
				}
			});
	    },
//	    删除
	    delData:function(){
            if(this.selected.length>0){
                var that=this;
                this.$Modal.confirm({
                    content: '<h4>确定删除？</h4>',
                    onOk: () => {
                        this.axios({
                            method:'get',
                            url:that.$store.state.app.globalUrl+"/admin/ExaminationRoom/del?id="+that.selected.join(','),
                            data:{}
                        }).then(function(res){
                            that.$Message.success('已删除');
                            that.$router.push({
                                name:'examination-room',
                                query:{time:Date.parse(new Date())}
                            })
                        });
                    },
                    onCancel: () => {
                        this.$Message.info('已取消');
                    }
                })
            }else{
               this.$Message.error('未选择考场');
            }
        },
//      分页
        paging:function(pa){
        	this.page=pa;
        	this.loadData();
        	this.selected=[];
        	
        },
//      时间
        changeTime:function(time){
         	this.beginTime=util.timeToTimestamp(time[0]);
         	this.finishTime=util.timeToTimestamp(time[1]);
        },
        //     导出数据
		derive:function(){
			if(this.selectedAll.length>0){
            	var columnsArr=[
	            	{title: '排序',key: 'id'},
	            	{title: '考场名称',key: 'name'},
	            	{title: '绑定试卷名称',key: 'testPaperName'},
	            	{title: '考试起止时间',key: 'examStartTime'},
	            	{title: '启用状态',key: 'status'},
	            	{title: '应参考人数',key: 'examineeId'},
	            	{title: '合格人数',key: 'qualified'},
	            	{title: '合格率',key: 'yleld'},
	            	];
            	var selectedAllListData=[];
            	this.selectedAll.forEach(function(v){
            		var obj={
            			Id:v.Id,
            			name:v.name,
            			testPaperName:v.testPaperName,
            			examStartTime:util.timestampToTime(v.examStartTime)+util.timestampToTime(v.examEndTime),
            			status:(v.status=='1'?'已启用':'已禁用'),
            			examineeId:v.examineeId,
            			qualified:v.qualified,
            			yleld:v.yleld
            		}
            		selectedAllListData.push(obj)
            	})
            	this.$refs.selection.exportCsv({
            	    filename: '试卷列表',
            	    columns:columnsArr,
            	    data:selectedAllListData
            	});
            	this.$router.push({
					name:'examination-set',
					query:{time:Date.parse(new Date())}
				})
            }else{
            	this.$Message.error('未选择数据');
            }
			
		}
    }
}
</script>
<style scoped>
.time{margin-left: 27px;}
#time1{width: 280px !important;margin-left: 10px;}
.search-state{margin-top: 10px;}
.table{margin-top:10px;}
.table button{margin-top: 10px;float: left; margin-left: 10px;}
.table .ivu-page{float: right;margin-top: 10px; }
.checkbox{float: left;margin-top: 20px;}
.search{padding:10px 0;overflow: hidden;}
</style>